@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-select-sheet {
  @extend .axiom-base-sheet;
  
  // 选择器特定的样式
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--axiom-select-sheet-header-padding);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-color-secondary);
    backdrop-filter: blur(var(--backdrop-blur, 10px));
    position: relative;
    
    .btn-clear {
      flex-shrink: 0;
    }

    .sheet-title {
      flex: 1;
      text-align: center;
      margin: var(--axiom-select-sheet-title-margin);
      
      // 重置全局组件的默认样式，使其适应底部弹窗
      :deep(.axiom-title__main) {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--text-color);
      }
      
      :deep(.axiom-title__description) {
        display: none;
      }
    }

    .btn-close {
      flex-shrink: 0;
      
      // 调整关闭按钮样式
      :deep(.el-button) {
        padding: var(--axiom-select-sheet-close-btn-padding);
        border-radius: 50%;
        width: var(--axiom-select-sheet-close-btn-size);
        height: var(--axiom-select-sheet-close-btn-size);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .options-list {
    padding: var(--axiom-select-sheet-options-list-padding);
    max-height: 65vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--axiom-select-sheet-options-list-gap);
    
    // 自定义滚动条
    &::-webkit-scrollbar {
      width: var(--axiom-scrollbar-width, 6px);
    }
    
    &::-webkit-scrollbar-track {
      background: var(--bg-color-tertiary);
      border-radius: var(--axiom-scrollbar-thumb-border-radius, 3px);
    }
    
    &::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      opacity: 0.5;
      border-radius: var(--axiom-scrollbar-thumb-border-radius, 3px);
      
      &:hover {
        opacity: 0.8;
      }
    }

    .option-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--axiom-select-sheet-option-item-padding);
      border-radius: var(--axiom-select-sheet-option-item-radius);
      cursor: pointer;
      transition: all var(--axiom-transition-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      background: var(--bg-color-tertiary);
      border: 1px solid var(--border-color);
      backdrop-filter: blur(var(--backdrop-blur, 10px));
      
      // 悬停效果
      &:hover {
        background: var(--primary-color-light);
        border-color: var(--primary-color);
        transform: translateY(-1px);
        box-shadow: var(--axiom-select-sheet-option-item-hover-shadow);
      }

      // 选中状态
      &.selected {
        background: var(--primary-color-light);
        border: var(--axiom-select-sheet-option-item-selected-border-width) solid var(--primary-color);
        transform: translateY(-1px);
        box-shadow: var(--axiom-select-sheet-option-item-selected-shadow);
        
        .checkmark {
          color: var(--primary-color);
          animation: checkmarkBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          filter: drop-shadow(0 2px 4px rgba(var(--primary-color-rgb), 0.3));
        }
      }

      .option-label {
        flex: 1;
        
        :deep(.axiom-text) {
          font-size: 15px;
          transition: all var(--axiom-transition-duration-base) ease;
        }
      }

      .checkmark {
        font-size: 18px;
        color: transparent;
        transition: all var(--axiom-transition-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
        margin-left: var(--axiom-select-sheet-checkmark-margin-left);
        flex-shrink: 0;
      }
    }
  }

  .footer {
    padding: var(--axiom-select-sheet-footer-padding) calc(var(--axiom-select-sheet-footer-padding) + env(safe-area-inset-bottom));
    background: var(--bg-color-secondary);
    backdrop-filter: blur(var(--backdrop-blur, 20px));
    border-top: 1px solid var(--border-color);
    
    .confirm-button {
      width: 100%;
      max-width: var(--axiom-select-sheet-confirm-btn-max-width);
      margin: 0 auto;
      display: block;
      
      :deep(.el-button) {
        width: 100%;
        height: var(--axiom-select-sheet-confirm-btn-height);
        border-radius: var(--axiom-select-sheet-confirm-btn-radius);
        font-size: var(--axiom-select-sheet-confirm-btn-font-size);
        font-weight: 600;
        transition: all var(--axiom-transition-duration-base) cubic-bezier(0.4, 0, 0.2, 1);
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: var(--axiom-select-sheet-confirm-btn-hover-shadow);
        }
        
        &:active {
          transform: translateY(-1px);
          box-shadow: var(--axiom-select-sheet-confirm-btn-active-shadow);
        }
      }
    }
  }
}

// 动画定义
@keyframes checkmarkBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

// 特殊主题的额外样式
.theme-cyberpunk .axiom-select-sheet,
.theme-neon .axiom-select-sheet {
  // 为cyberpunk和neon主题添加额外的辉光效果
  box-shadow: 
    0 -8px 32px rgba(var(--primary-color-rgb), 0.2),
    0 -4px 16px rgba(var(--primary-color-rgb), 0.1),
    0 -2px 8px rgba(var(--primary-color-rgb), 0.05);
    
  .options-list .option-item.selected {
    box-shadow: 
      0 6px 20px rgba(var(--primary-color-rgb), 0.4),
      0 2px 8px rgba(var(--primary-color-rgb), 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 15px rgba(var(--primary-color-rgb), 0.3);
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .axiom-select-sheet {
    background: linear-gradient(180deg, 
      rgba(30, 30, 30, 0.98) 0%, 
      rgba(25, 25, 25, 1) 10%
    );
    border-color: rgba(255, 255, 255, 0.1);
    
    .header {
      background: rgba(30, 30, 30, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    
    .options-list {
      .option-item {
        background: rgba(40, 40, 40, 0.7);
        border-color: rgba(255, 255, 255, 0.05);
        
        &:hover {
          background: linear-gradient(135deg, 
            rgba(50, 50, 50, 0.9) 0%, 
            rgba(var(--primary-color-rgb), 0.1) 100%
          );
        }
        
        &.selected {
          background: linear-gradient(135deg, 
            rgba(var(--primary-color-rgb), 0.2) 0%, 
            rgba(var(--primary-color-rgb), 0.25) 100%
          );
        }
      }
    }
    
    .footer {
      background: linear-gradient(180deg, 
        rgba(30, 30, 30, 0.95) 0%, 
        rgba(25, 25, 25, 1) 100%
      );
      border-top-color: rgba(255, 255, 255, 0.08);
    }
  }
}